<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cph">基本信息</view>
        <view class="red-status status">{{ statusName }}</view>
      </view>

      <view class="bottom">
        <view class="items">
          <text class="til">车牌号:</text>
          <text class="val">{{ itemList.carBrand || '' }}</text>
        </view>
        <view class="items">
          <text class="til">运价(元/吨):</text>
          <text class="val">{{ itemList.freightRate || '' }}</text>
        </view>
      </view>

      <view class="bottom">
        <view class="items">
          <text class="til">路损:</text>
          <text class="val">{{ itemList.roadLoss || '' }}</text>
        </view>
        <view class="items">
          <text class="til">煤价(元/吨):</text>
          <text class="val">{{ itemList.coalPrice || '' }}</text>
        </view>
      </view>

      <view class="bottom title-box">采购信息</view>
      <view class="bottom">
        <view class="items full">
          <text class="til">采购方:</text>
          <text class="val">{{ itemList.purchase || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">承运单位:</text>
          <text class="val">{{ itemList.cusTransport || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">煤种:</text>
          <text class="val">{{ itemList.proName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">装货地:</text>
          <text class="val">{{ itemList.loadingSiteName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">卸货点:</text>
          <text class="val">{{ itemList.landingPointName || '' }}</text>
        </view>
      </view>
      <view class="bottom title-box">运输情况</view>
      <view class="bottom">
        <view class="items">
          <text class="til">矿发信息:</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">矿发毛重(吨):</text>
          <text class="val">{{ itemList.mineralGrossWeight || '-' }}</text>
        </view>
        <view class="items">
          <text class="til">矿发皮重(吨):</text>
          <text class="val">{{ itemList.mineralTareWeight || '-' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">矿发净重(吨):</text>
          <text class="val">{{ itemList.mineralNetWeight || '-' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">矿发时间:</text>
          <text class="val">{{ itemList.mineralTime || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items" style="position: relative; height: 160rpx">
          <text class="til">矿发磅单:</text>
          <image class="cover-img" @click="clickImg(itemList.mineralPoundList)" :src="itemList.mineralPoundList"
            mode="aspectFill"></image>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">到站信息:</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">到站毛重(吨):</text>
          <text class="val">{{ itemList.grossWeight || '-' }}</text>
        </view>
        <view class="items">
          <text class="til">到站皮重(吨):</text>
          <text class="val">{{ itemList.tareWeight || '-' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">到站净重(吨):</text>
          <text class="val">{{ itemList.netWeight || '-' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items full">
          <text class="til">到站录皮时间:</text>
          <text class="val">{{ itemList.tareTime || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items" style="position: relative; height: 160rpx">
          <text class="til">站台磅单:</text>
          <image class="cover-img" @click="clickImg(itemList.platformScale)" :src="itemList.platformScale"
            mode="aspectFill"></image>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">亏吨(吨):</text>
          <text class="val">{{ itemList.deficientTon || '-' }}</text>
        </view>
        <view class="items">
          <text class="til">涨吨(吨):</text>
          <text class="val">{{ itemList.riseTon || '-' }}</text>
        </view>
        <view class="items">
          <text class="til">扣费(元):</text>
          <text class="val">{{ itemList.deductPrice || '-' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDeliverOne } from '@/api/system/goods.js';
  export default {
    name: 'row-number',
    data() {
      return {
        detailType: 1, // 1:待审核  2：待称毛  3：已完成
        statusName: '',
        statusLists: [
          '待供应商审核', //0
          '待采购方审核', //1
          '待入场', //2
          '待称毛', //3
          '待确认', //4
          '待录皮', //5
          '待出厂', //6
          '已完成', //7
          '已作废', //8
          '已终止' //9
        ],
        itemList: {
          carBrand: undefined,
          status: undefined,
          freightRate: undefined,
          roadLoss: undefined,
          coalPrice: undefined,
          purchase: undefined,
          cusTransport: undefined,
          proName: undefined,
          loadingSiteName: undefined,
          unloadingPlace: undefined,
          unloadingPoint: undefined,
          mineralTareWeight: undefined,
          mineralGrossWeight: undefined,
          mineralNetWeight: undefined,
          mineralTime: undefined,
          mineralPoundList: undefined,
          tareWeight: undefined,
          grossWeight: undefined,
          netWeight: undefined,
          tareTime: undefined
        }
      };
    },
    onLoad(option) {
      console.log(option, '============');
      this.getDetails(option.id);
    },
    methods: {
      clickImg(url) {
        uni.previewImage({
          urls: [url]
        });
      },
      async getDetails(id) {
        let datas = await getDeliverOne(id);
        if (datas.code == 200) {
          this.itemList = datas.data;
          this.statusName = this.statusLists[Number(this.itemList.status)];
        }
      },
      queueRule() { },
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    padding: 30rpx;
    margin: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background: #fff;
    font-size: 14px;
    color: #000;

    .phxx-item-content {
      width: 644rpx;

      .top {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
        position: relative;
        padding: 20rpx 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cph {
          font-size: 18px;
          font-weight: 700;
        }

        .name {
          font-weight: 700;
        }

        .status {
          color: #fff;
          font-size: 14px;
          padding: 0 20rpx;
          text-align: center;
          border-radius: 10rpx;
          background: #ff9900;
          display: block;
          height: 29px;
          line-height: 29px;
        }

        .red-status {
          background: #fc1a0c !important;
        }

        .green-status {
          background: #37a134 !important;
        }
      }

      .center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20rpx 5rpx;

        .gs {
          margin-right: 30rpx;
          font-size: 16px;
        }

        .gs,
        .mz,
        .location {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 50%;
        }
      }

      .title-box {
        font-weight: bold;
        border-bottom: 1px solid #e5e6e6;
        padding: 22rpx 0 !important;
      }

      .bottom-btn {
        text-align: right;
        border-top: 1px solid #e8e7e7;
        padding-top: 10px;
      }

      .bottom.space {
        border-bottom: 1rpx solid #e6e6e6;
      }

      .bottom {
        padding: 20rpx 0 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >.items {
          padding-bottom: 10rpx;
          width: 50%;

          .cover-img {
            width: 150rpx;
            height: 106rpx;
            position: absolute;
            border: 1px solid #ccc;
            top: 50rpx;
            left: 0;
          }
        }

        .items.full {
          width: 100% !important;
        }

        .til {
          display: inline-block;
        }

        .val {
          margin-left: 15rpx;
        }
      }
    }
  }
</style>